<!--
 * @Author: Chenqiu
 * @Date: 2021-09-23 15:18:26
 * @LastEditors: Chenqiu
 * @LastEditTime: 2021-09-23 17:19:58
 * @Description: 
-->
<template>
  <div>
    <div class="hotTitle">热点新闻</div>
    <div class="hotMain">
      <ul>
        <li v-for="item in list" @click="toDetails(item.id)" :key="item.id">{{ item.title }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import { get } from "../utils/request";
export default {
  data() {
    return {
      list: [],
    };
  },
  created() {
    this.loadHotArticles();
  },
  methods: {
    loadHotArticles() {
      let url = "/index/article/findHotArticles";
      get(url).then((res) => {
        this.list = res.data;
      });
    },
    // 跳转到详情页
    toDetails(id) {
      this.$router.push({
        path: "/article",
        query: { id },
      });
    },
  },
};
</script>
<style lang="scss">
.rank {
  width: 300px;
  .hotTitle {
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: rgb(214, 134, 134);
    border-radius: 5px;
  }
  ul{
      margin-top: 10%;
      padding: .8em 1.2em;
  }
  li {
    line-height: 1.5em;
    font-size: 1.2em;
    padding: 0.5em;
    border-bottom: 1px solid #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  li:hover{
      cursor:pointer;
      color: rgb(231, 74, 74);
  }
}
</style>